import React from "react";
import LeftMenu from "./left";
import RightMenu from "./right";
import MainContent from "./content";
import { DragDropContext } from 'react-dnd';
import { inject, observer } from "mobx-react";
import HTML5Backend from 'react-dnd-html5-backend';

@inject('edcFormDesignerStore')
@observer
class FormDesignerMain extends React.Component {
  constructor(props) {
    super();

    this.store = props.edcFormDesignerStore;
  }

  render() {
    const { onDragHover, onDrop } = this.store.componentStore;

    return (
      <div className='ef-main'>
        <div>
          <LeftMenu />
          <RightMenu />
          <MainContent onDragHover={onDragHover} onDrop={onDrop} />
        </div>
      </div>
    );
  }
}

export default DragDropContext(HTML5Backend)(FormDesignerMain);